<template>
  <div>
   <!-- Nav板块 -->
   <van-nav-bar title="商品详情" left-arrow  @click-left="$router.go(-1)"/>
    <!-- 轮播图 -->
    <van-swipe @change="onChange" class="my-swipe">
  <van-swipe-item v-for=" (item,index) in swipeImgs" :key="index">
    <img v-lazy="item.external_url" />
  </van-swipe-item>
  <template #indicator>
    <div class="custom-indicator">{{ current + 1 }}/{{ swipeImgs.length }}</div>
  </template>
</van-swipe>
<!-- 商品介绍 -->
 <div class="goodsText">
  <span class="newprice">￥{{goodsList.goods_price_max}}</span>
  <span class="oldprice">￥{{goodsList.line_price_max}}</span>
  <span class="buy">已售{{goodsList.goods_sales }}件</span>
<div class="text">{{ goodsList.goods_name }}</div>
 </div>
 <!-- 快递配送板块 -->
  <div class="service">
        <div class="left-words">
          <span><van-icon name="passed" />七天无理由退货</span>
          <span><van-icon name="passed" />48小时发货</span>
        </div>
        <div class="right-icon">
          <van-icon name="arrow" />
        </div>
      </div>

  <!-- 商品评价 -->
   <div class="productReviews">
    <span class="leftText">商品评价({{rowsTotal.all }}条)</span><span class="rightText" @click="getMoreRows">查看更多<van-icon name="arrow" /></span>
   </div>
   <ul>
    <li>
   <productReviews :rowsTotal="rowsTotal" :rowsList="rowsList"></productReviews>
    </li>
   </ul>
     <!-- 底部购物导航 -->

         <van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
  <van-goods-action-icon icon="cart-o" text="购物车" />
  <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
  <van-goods-action-button @click="show = true" type="warning" text="加入购物车" />
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>

    <!-- 商品描述 -->
    <div class="desc" v-html="goodsList.content">
    </div>

    <!-- 弹出框 -->
    <van-action-sheet v-model="show" title="加入购物车">
  <div class="content">
    <img :src="goodsList.goods_image" alt="">
    <div class="text">
      <div class="price"><i>￥</i>{{ goodsList.goods_price_max }}</div>
      <div class="kucun">库存{{ goodsList.stock_total }}</div>
    </div>
  </div>
  <div class="numBox"><span>数量</span><div class="zujian"><CountBox :num="num" @descNum="descNum"></CountBox></div></div>
  <div class="footer" @click="goCar">加入购物车</div>
</van-action-sheet>
  </div>

</template>

<script>
import productReviews from '@/components/productReviews.vue'
import { getList, getRows, getRowsTotal } from '@/api/productReviews'
import CountBox from '@/components/CountBox.vue'
import { Dialog } from 'vant'
// import { addCart } from '@/api/cart'
export default {
  name: 'ProdetailIndex',
  data () {
    return {
      current: 0, // 轮播图图片位置
      goodsList: {}, // 商品详情
      swipeImgs: [], // 轮播图图片
      rowsList: [], // 部分评论
      rowsTotal: {}, // 商品评论总数
      show: false, // 显示隐藏加入购物车弹框
      num: 10 // 商品数量
    }
  },
  async created () {
    // 动态渲染
    // 商品详情
    const res = await getList(this.$route.params.id)
    this.swipeImgs = res.data.detail.goods_images
    this.goodsList = res.data.detail
    console.log(this.goodsList)

    // 评论总数
    const rowsTotal = await getRowsTotal(this.$route.params.id)
    // console.log(rowsTotal)
    this.rowsTotal = rowsTotal.data.total
    // console.log(this.rowsTotal)

    // 部分评论
    const rows = await getRows(this.$route.params.id, 2)
    // console.log(rows)
    this.rowsList = rows.data.list
    // console.log(this.rowsList)
  },
  methods: {
    onChange (index) {
      this.current = index
    },
    // 加入购物车
    async adddCart () {
      console.log(this.$route.params.id)
      console.log(this.num)
      // await addCart(this.$route.params.id, this.num)
    },
    async getMoreRows () {
      // 部分评论
      const rows = await getRows(this.$route.params.id, this.rowsTotal.all)
      // console.log(rows)
      this.rowsList = rows.data.list
    // console.log(this.rowsList)
    },
    // 加入购物车组件商品数量减少
    descNum (newNum) {
      this.num = newNum
    },
    goCar () {
      // 判断token是否存在
      // 1.token不存在 弹出去登录框
      if (!localStorage.getItem('kk_shopping_info')) {
        Dialog.confirm({
          title: '温馨提示',
          message: '需要先登录才能继续操作',
          confirmButtonText: '去登录',
          cancelButtonText: '再逛逛'
        })
          .then(() => {
            this.$router.push('/login')
          })
          .catch(() => {
          // on cancel
          })
      } else {
        this.adddCart()
        // this.$router.push('/cart')
      }
    }
  },
  components: {
    productReviews,
    CountBox
  }
}
</script>

<style lang="less" scoped>
  .custom-indicator {
    position: absolute;
    margin-bottom: 10px;
    right: 5px;
    bottom: 5px;
    border-radius:10px ;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    img{
     width: 100%;
    }
  }
  .goodsText{
    margin-top: 10px;

    .newprice{
      color: #b03e28;
      font-size: 16px;
      margin: 0 5px 0 10px;
    }
    .oldprice{
      text-decoration: line-through;
      color: #a5a5a5;
    }
    .buy{
      float: right;
      color: #a5a5a5;
    }
    .text{
      padding: 10px;

    }
  }
  .productReviews{
    margin-top: 10px;
    .leftText{
      margin-left: 10px;
    }
    .rightText{
      float: right;
      color: #a5a5a5;
    }
  }
  .service {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    line-height: 40px;
    margin-top: 10px;
    font-size: 16px;
    background-color: #fafafa;
    .left-words {
      span {
        margin-right: 10px;
      }
      .van-icon {
        margin-right: 4px;
        color: #fa2209;
      }
    }
  }
  .desc{
    width: 100%;
    overflow: scroll;
    ::v-deep img {
      display: block;
      width: 100%!important;
    }
  }
  .content{
    margin-bottom: 10px;
    padding: 10px;
    img{
      float: left;
      width: 100px;
      height: 100px;
    }
    .text{
    float: left;
    margin-left: 15px;
    margin-top: 10px;
    .price{
      color: #f2670c;
      font-size: 24px;
      margin-bottom: 5px;
      i{
        font-style: normal;
        font-size: 16px;
      }
    }
    .kucun{
      margin-left: 5px;
    }
  }
  }
  .content:after {
content: '.';
display: block;
clear: both;
overflow: hidden;
height: 0;
}
.numBox{
  position: relative;
  padding: 10px;
  .zujian{
    float: right;
    background-color: skyblue;
  }
}
.footer{
  width: 350px;
  height: 50px;
  margin:10px 0 10px 12px;
  text-align: center;
  line-height: 50px;
  color: white;
  border-radius: 50px;
  background-color: #ff9900;
}
</style>
